<template>
  <a-modal 
    :visible="visible"
    okText="提交" 
    cancelText="取消"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="600px"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-table bordered :columns="columns" :data-source="tableData" rowKey="id"        
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectChange }">
        <!-- <template slot="operation" slot-scope="text, record">
            <a href="javascript:;" @click="handleView(record.id)">查看本机机构店铺列表</a>
        </template> -->
    </a-table>
  </a-modal>
</template>

<script>
import deepCopy from '@/utils/deepCopy'
export default {
    props:{
        visible:{
            type:Boolean,
            default:false,
        },
        modelClassify:{
            type:Object,
            default(){
                return {
                    value:'',
                    label:'',
                    index:'',
                }
            }
        },
        modelIds:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    computed:{
        userInfo(){
            return this.$store.getters.userInfo || {};
        },
        shopId(){
            return this.userInfo.shopId;
        }
    },
    data(){
        return {
            title:'添加商品型号',
            //modelClassifyName:'',
            columns:[
                {
                    title:'商品型号',
                    key:'normName',
                    dataIndex:'normName'
                }
            ],
            tableData:[],
            selectedRowKeys:[],
            keywords:'',
            // pagination: {
            //     showQuickJumper: true,
            //     total: 0,
            //     current: 1,
            //     pageSize: 10,
            //     showTotal: (total) => `共${total}条`,
            //     showSizeChanger: true,
            //     pageSizeOptions: ["10", "20", "50", "100", "200"],
            // },
        }
    },
    watch:{
        visible(newVal){
            if(newVal){
                this.keywords='';
                //this.getProductModelClassify();
                this.getProductModel();
                this.selectedRowKeys=deepCopy(this.modelIds);
            }
        }
    },
    methods:{
        async getProductModel(){
            let res=await this.$get('/goods/modelnorm/list',{
                //size:this.pagination.pageSize,
                //current:this.pagination.current,
                normName:this.keywords,
                parentId:this.modelClassify.value,
                shopId:this.shopId,
            })
            if(res && res.returnCode=='1000'){
                // this.tableData=(res.dataInfo || {}).records || [];
                // this.pagination.total = res.dataInfo.total

                this.tableData=res.dataInfo || [];
            }
        },
        // handleTableChange(pagination) {
        //     if (pagination) {
        //         this.pagination.current = pagination.current;
        //         this.pagination.pageSize = pagination.pageSize;
        //         this.getProductModel();
        //     }
        // },
        //获取型号型号标题
        async getTitleLabelAndValue(id){
            if(!parseInt(id)){
                return {};
            }
            let res = await this.$get('/goods/modelnorm/id',{
                id
            },false,true);
            if(res && res.returnCode=='1000'){
                return {
                    label:(res.dataInfo || {}).normName || '',
                    value:id,
                }
            }
            else {
                return {};
            }
        },
        async handleSubmit () {
            const finalPromiseList=[];
            this.selectedRowKeys.forEach(id=>{
                const info=this.getTitleLabelAndValue(id);
                finalPromiseList.push(info)
            })
            const finalResultList=await Promise.all(finalPromiseList);
            this.$emit('submit',finalResultList,this.modelClassify);
        },        
        closeModal (freshTable) {
            this.$emit('cancel', freshTable)
        },
        handleSelectChange(ids){
            this.selectedRowKeys=ids;
        },
        handleSearch(){
            this.getProductModel();
        }
    }
}
</script>

<style lang="less" scoped>
.search{
    //width:300px;
    margin-top:10px;
    text-align: right;
    .ant-input-search{
        width:300px;   
    }
}
/deep/ .ant-table{
    margin-top:10px;
}
</style>